<style lang="sass">
@import "../../../sass/config"
.authorPage
  display: flex
  flex-direction: column
.authorDetail
  display: flex
  align-items: center
  background-image: linear-gradient(to bottom, #eeecec, #cbc1b9)
  padding: 20px
  .nickName
    margin-left: 22px
    font-size: 43px
.list
  flex: 1
</style>
<template>
  <view class="authorPage">
    <view class="authorDetail">
      <Image :src="detail.avatar" style="width: 50px; height: 50px; border-radius: 50%;"/>
      <Text class="nickName">
        {{ detail.nickName }}
      </Text>
    </view>
    <scroll-view class="list">
      <groupItem v-for="item in list" :key="item.id" :item="item"></groupItem>
    </scroll-view>
  </view>
</template>
<script setup>
import {get} from "../../../util/request";
import {reactive, ref} from "vue";
import Taro from "@tarojs/taro";
import groupItem from '../../../components/groupItem/index.vue'

const detail = ref({})
const list = ref([])
const pageInfo = reactive({
  pageNum: 1,
  pageSize: 20
})
const id = Taro.getCurrentInstance().router.params.id
Taro.showShareMenu({
  withShareTicket: true
})
function nextPage() {
  pageInfo.pageNum = pageInfo.pageNum + 1
  this.getList()
}

const getDetail = async () => {
  const result = await get('author/detail', {
    id: id
  })
  detail.value = result
}

function goGroup(id) {
  Taro.navigateTo({
    url: `/pages/group/detail/index?id=${id}`
  })
}

const getList = async () => {
  const result = await get('author/group', {
    ...pageInfo,
    id: id
  })
  list.value = list.value.concat(result.list)
}

getDetail()
getList()
</script>
